// 注册页面
<template>
  <div class="register">
    <!-- 关闭按钮 -->
    <div class="close">
      <span class="iconfont iconicon-test"></span>
    </div>
    <!-- new logo图标 -->
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 输入框（3个） -->
    <div class="inputs">
      <myipt
        type="text"
        placeholder="请输入手机号/用户名"
        v-model="user.username"
        :rules="/^1[35789]\d{9}$|^1\d{4}$/"
        msg="请输入手机号"
      ></myipt>
      <myipt
        type="text"
        placeholder="请输入您要设置的昵称"
        v-model="user.nickname"
        :rules="/^\w+$/"
        msg="请输入昵称"
      ></myipt>
      <myipt
        type="password"
        placeholder="请输入密码"
        v-model="user.password"
        :rules="/^\S{3,16}$/"
        msg="请输入3-16位的密码"
      ></myipt>
    </div>
    <!-- 提示登录 -->
    <p class="tips">
      我有账号？
      <a href="#/login">去登录</a>
    </p>
    <!-- 注册按钮 -->
    <mybtn class="_orange" @click="register">注册</mybtn>
  </div>
</template>

<script>
import mybtn from "@/components/mybtn";
import myipt from "@/components/myipt";
import { register } from "@/apis/users.js";
export default {
  components: {
    myipt,
    mybtn,
  },
  data() {
    return {
      user: {
        username: "",
        nickname: "",
        password: "",
      },
    };
  },
  methods: {
    // 发送注册请求

    async register() {
      if (
        this.user.username !== "" &&
        this.user.nickname !== "" &&
        this.user.password !== ""
      ) {
        alert(11);
        let regis = await register(this.user);
        console.log(regis);
        if (regis.data.statusCode === 401) {
          this.$toast.fail("注册失败");
        } else if(regis.data.statusCode === 400){
          this.$toast.fail('用户已经存在')
        }
        else {
          this.$toast.success("注册成功");
          this.$router.push({
            path: "/login",
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  padding: 20 * 100vw/360;
  .close {
    font-size: 20 * 100vw/360;
  }
  .logo {
    display: flex;
    justify-content: center;
    span {
      font-size: 126 * 100vw/360;
      color: #d81e06;
    }
  }
  .inputs {
    margin-top: 20 * 100vw/360;
    .myipt {
      margin-bottom: 20 * 100vw/360;
    }
  }
  .mybtn {
    margin-top: 30 * 100vw/360;
    &._orange {
      background-color: orange;
    }
  }
}
</style>